<template>
  <div class="header-section">

    <el-row class="time-row" style="justify-content: flex-end;">
      <el-dropdown trigger="click">
        <div class="time-row">
          <img class="userimg" src="@/assets/img/img_header/user.png">
          <div class="time_user">{{ UserStore?.userInfo?.username }}</div>
          <img class="userdown" src="@/assets/img/img_header/user_down.png">
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="systemset">系统设置</el-dropdown-item>
            <el-dropdown-item @click="forgotpass">修改密码</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-row>

    <!-- 导航按钮部分（使用配置文件渲染） -->
    <el-row class="buttons-row">
      <el-col :span="24">
        <ul class="header-content-left-bottom">
          <li v-for="(item, index) in filteredNavItems" :key="index" @click="handleClick(item.path, index)"
            :class="['gradient-btn', { 'active': activeIndex === index }]">
            {{ item.name }}
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ElRow, ElCol } from 'element-plus'
import { useRouter } from 'vue-router'
import { rightRouter } from '../config/navConfig' // 引入导航配置文件
import { useUserStore } from '@/stores'
import { ref, computed } from 'vue'
import { filterNavItemsByPermission } from '../config/permissionUtils' // 引入权限过滤工具函数

const router = useRouter()
const UserStore = useUserStore()

// 根据用户权限过滤导航项
/**
 * 计算属性：根据用户权限过滤导航项
 * @returns {Array} 过滤后的导航项数组
 */
const filteredNavItems = computed(() => {
  // 如果用户信息不存在，返回空数组
  if (!UserStore.userInfo || !UserStore.userInfo.authorities) {
    return []
  }
  
  // 使用工具函数过滤导航项
  return filterNavItemsByPermission(rightRouter, UserStore.userInfo.authorities)
})

// 处理按钮点击事件
/**
 * 处理导航按钮点击事件
 * @param {string} path - 路由路径
 * @param {number} index - 索引
 */
const handleClick = (path, index) => {
  navigateTo(path)
  // 通过事件通知父组件更新激活状态
  emit('update-active', index, 'right')
}

// 路由跳转
/**
 * 路由跳转方法
 * @param {string} path - 路由路径
 */
const navigateTo = (path) => {
  router.push(path)
}



const props = defineProps({
  activeIndex: {
    type: Number,
    default: -1
  }
})

const emit = defineEmits(['update-active'])




const forgotpass = () => {
  router.push({
    path: '/forgotpass',
    query: {
      changepass: true
    }
  })
}

//
const systemset = () => {
  router.push('/user')
}
// 退出登录
const handleLogout = () => {
  UserStore.clearUserInfo()
  router.push('/logins')
}




</script>

<style lang="less" scoped>
.header-section {
  padding: 5px;
  padding-top: 8px
}

.time-row {
  margin-bottom: 10px !important;
  margin-right: 25px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  align-items: center;
  cursor: pointer;

  .time_user {
    margin-right: 8px;
    width: 48px;
    height: 22px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #AFD7E9;
    line-height: 22px;
    text-align: center;
    font-style: normal;

  }

  .userimg {
    width: 20px;
    height: 20px;
    margin-right: 8px
  }

  .userdown {
    width: 12px;
    height: 7px;
    margin-right: 8px;
  }


}

.time-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  min-height: 22px;
  margin-left: 15px;

}

.time-item {
  width: auto;
  min-width: 12%;
  height: 100%;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #AFD7E9;
  line-height: 22px;
  text-align: center;
  font-style: normal;
}

.separator {
  color: #AFD7E9;
  font-size: 16px;
  line-height: 22px;
}

.buttons-row {
  margin-left: 0 !important;
}

.header-content-left-bottom {
  display: flex;
  gap: 10px;
  margin-right: 25px;
  padding: 0;
  list-style: none;
  justify-content: flex-end;
}

.gradient-btn {
  width: 150px;
  height: 36px;
  background-image: url('@/assets/img/img_header/R-btn.png');
  background-size: 100% 100%;
  color: #AFD7E9;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  transition: transform 0.2s ease;
  cursor: pointer;
}

/* 悬浮状态 */
.gradient-btn:hover {
  transform: translateY(-2px);
  background-image: url('@/assets/img/img_header/R-H-btn.png');
}

/* 激活状态 - 点击后保持显示 */
.gradient-btn.active {
  background-image: url('@/assets/img/img_header/R-H-btn.png');
  transform: translateY(0);
}

/* 激活状态下的悬浮效果保持不变 */
.gradient-btn.active:hover {
  transform: translateY(-2px);
}



.el-dropdown-menu {
  background-color: #091B2B !important;
}



:deep(.el-dropdown-menu__item) {
  background: #091B2B;
  color: #93BDE3;
}


:deep(.el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover) {
  background: #354554 !important;
  color: #DCDFE2 !important;
}
</style>